<template>
  <tab-bar v-model="active">
    <tab-bar-item v-for="tab in tabs" :key="tab.id" :icon="tab.icon">{{tab.name}}</tab-bar-item>
  </tab-bar>
</template>

<script setup>
import { ref } from 'vue';

import TabBar from './components/TabBar.vue';
import TabBarItem from './components/TabBarItem.vue';

const active = ref(0)
const tabs = ref([
  {id:1,name:'首页',icon:'home'},
  {id:2,name:'分类',icon:'category'},
  {id:3,name:'购物车',icon:'cart'},
  {id:4,name:'我的',icon:'user'},
])

</script>

<style scoped>
</style>